<template>
    <div>
        <Row type="flex" justify="center" class="code-row-bg">
            <!--左侧-->
            <ICol span="16">
                <!--走马灯-->
                <Carousel style="height: 400px" loop autoplay :autoplay-speed="3000">
                    <CarouselItem>
                        <img src="https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/1.jpeg"
                             alt="" style="width: 100%;height: 400px">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/2.jpg"
                             alt="" style="width: 100%;height: 400px">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/3.jpg"
                             alt="" style="width: 100%;height: 400px">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/4.jpg"
                             alt="" style="width: 100%;height: 400px">
                    </CarouselItem>
                </Carousel>
                <!--文章推荐-->
                <h3 style="width: 100%;margin-top:4%;margin-bottom: 2%;text-align: left">
                    <Icon type="ios-book"/>
                    文章推荐
                </h3>
                <List item-layout="vertical">
                    <Card style="margin-bottom: 2%" v-for="(article,index) in articleList" :key="index">
                        <router-link :to="`/uindex/userarticleDetail/${article.aid}`">
                            <ListItem style="text-align: left">
                                <ListItemMeta :avatar="article.user.uheadpicture"
                                              :description="article.aCreatetime"><h3 slot="title">
                                    {{article.atitle}}</h3>
                                </ListItemMeta>
                                {{ article.adesc }}
                                <template slot="action">
                                    <li>
                                        <Icon type="md-eye"/>
                                        {{article.avisitcount}}
                                    </li>
                                    <li>
                                        <Icon type="md-heart"/>
                                        {{article.alikecount}}
                                    </li>
                                </template>
                                <div slot="extra" style="width: 280px;height: 140px;overflow: hidden">
                                    <img class="desImg"
                                         :src="article.apicture!==null?article.apicture.split(',').slice(0,1):articleDefault"
                                         style="width: 280px;height: 140px">
                                </div>
                            </ListItem>
                        </router-link>
                    </Card>
                </List>
            </ICol>
        </Row>
    </div>
</template>

<script>

  export default {
    data () {
      return {
        articleDefault: 'https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/1.jpeg',
        articleList: [],
        articleVo: {
          pageNum: 1,
          pageSize: 10,
          sort: 1,
          status: 0
        },
        total: 0
      }
    },
    components: {
    },
    mounted () {
      this.getArticle()
    },
    methods: {
      getArticle () {
        this.$http.get('article', { params: new URLSearchParams(this.articleVo) }).then(res => {
          res = res.data
          if (res.code === 0) {
            this.total = res.count
            this.articleList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>
    .desImg {
        transition: 0.5s;
    }

    .desImg:hover {
        transform: scale(1.2);
    }
</style>
